.inline-block {
  display: inline-block;
  vertical-align: middle;
}
.other {
  position: relative;
  overflow: hidden;
  margin: 20px 0;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  text-align: center;
}
.mac-app .other {
  border: 1px solid #eee;
}
.other__title {
  position: absolute;
  width: 100px;
  height: 80px;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.other__title h3 {
  color: rgba(0, 0, 0, 0.54);
}
.other__title:hover h3 {
  color: #21c494;
}
.other__title:hover .job {
  background-position: 0 -301px;
}
.other__title:hover .read {
  background-position: 0 -501px;
}
.other__title:hover .internet {
  background-position: 0 -401px;
}
.other__title:hover .life {
  background-position: 0 -351px;
}
.other__title:hover .tool {
  background-position: 0 -451px;
}
.other__title:hover .game {
  background-position: 0 -556px;
}
.other__title--img {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  background-image: url(../static/images/icon-other-sm.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.other__title--img.job {
  background-position: 0 0;
}
.other__title--img.read {
  background-position: 0 -200px;
}
.other__title--img.internet {
  background-position: 0 -100px;
}
.other__title--img.life {
  background-position: 0 -50px;
}
.other__title--img.tool {
  background-position: 0 -150px;
}
.other__title--img.game {
  background-position: 0 -255px;
}
.other__link {
  width: 500px;
  padding: 10px 20px;
  margin-left: 99px;
  border-left: 1px solid #c9c9c9;
}
.mac-app .other__link {
  border-left: 1px solid #eee;
}
.other__link .link {
  padding: 0;
  border: 0!important;
  overflow: hidden;
}
.other__link .link li {
  width: 20%;
  height: 30px;
  line-height: 30px;
  margin: 10px;
  border: 1px solid #c9c9c9;
  font-size: 12px;
}
.mac-app .other__link .link li {
  border: 1px solid #eee;
}
.other:last-child li:nth-child(15) {
  background-image: url("../static/images/face.png");
  background-size: cover;
}
.other:last-child li:nth-child(16) {
  background-image: url("../static/images/face.png");
  background-size: cover;
}
.special {
  margin-top: 20px;
  background-color: #fff;
  text-align: center;
  border: 1px solid #c9c9c9;
}
.mac-app .special {
  border: 1px solid #eee;
}
.special h3 {
  color: rgba(0, 0, 0, 0.54);
  line-height: 40px;
  border-bottom: 1px solid #c9c9c9;
}
.mac-app .special h3 {
  border-bottom: 1px solid #eee;
}
.special__box {
  padding-bottom: 5px;
  overflow: hidden;
}
.special__box li {
  width: 33.333%;
  float: left;
  margin-top: 5px;
}
.special__box li a {
  display: block;
  color: rgba(0, 0, 0, 0.54);
}
.special__box li a:before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  margin: 10px auto;
  background-image: url('../static/images/icon-spec.png');
  background-size: 60px;
  background-repeat: no-repeat;
}
.special__box li a:hover:before {
  background-image: url('../static/images/icon-spec-hover.png');
}
.special__box--xcdsj:before {
  background-position: 0 0;
}
.special__box--jgdmx:before {
  background-position: -30px 0;
}
.special__box--zbchw:before {
  background-position: 0 -30px;
}
.special__box--xyxq:before {
  background-position: -30px -30px;
}
.special__box--bmjn:before {
  background-position: 0 -60px;
}
.special__box--xszn:before {
  background-position: -30px -60px;
}
